{% extends "billing/layout.html" %}
{% block title %}
    Monthly
{% endblock %}
{% block content %}
    <div class="page-header">
        <h1>使用量摘要</h1>
        <a href="{% url 'billing:table' %}">查看表格输出</a>
    </div>

    {% if sub_list %}
    <select name="sub_list" onchange="fetchData(this.options[selectedIndex].value)">
        <option value="" >全部</option>
        {% for sub in sub_list %}
            <option value="{{ sub.id }}">{{ sub.name }}</option>
        {% endfor %}
    </select>
    {% endif %}

    <div id="bar" style="width:1000px; height:600px;"></div>
{% endblock %}

{% load static %}
{% block script %}
<script type="text/javascript" src="{% static 'echarts/themes/essos.js' %}"></script>
<script>
    var chart = echarts.init(document.getElementById('bar'), 'essos', {renderer: 'canvas'});

    $(function () {
        fetchData();
    });

    function fetchData(subid) {
        $.ajax({
            type: "GET",
            url: "{% url 'billing:cost_monthly' %}",
            dataType: 'json',
            data: {'subid': subid},
            success: function (result) {
                chart.clear();
                chart.setOption(result.data);
            }
        });
    }
</script>
{% endblock %}
